/*
*配置方案表格
*SchemeTable.js
**/
import React, {Component,PropTypes} from 'react';
import { Table, Icon,Button,Input,Popconfirm,Select,Row} from 'antd';
import { connect } from 'react-redux';
import EditScheme from './EditScheme';

const Option = Select.Option;

const mapStateToProps = state => ({
	LargeAssetData:state.configSconst.LargeAssetData,
	pdtList:state.configSconst.pdtList,
	// detailData:state.configSconst.detailData
});
const mapDispatchToProps = {
	getOneConfigureScheme:query=>({
		type:'configSconst/getOneConfigureScheme',
		payload: query || {},
	}),
	changeState: query => ({
		type: 'configSconst/changeState',
		payload: query || {},
	}),
	deleteScheme: query => ({
		type: 'configSconst/deleteScheme',
		payload: query || {},
	}),
	getConfigKpis:query =>({
		type:'configSimulation/getConfigKpis',
		payload: query || {},
	}),
	CSchangeState:query=>({
		type:'configSimulation/CSchangeState',
		payload: query || {},
	})
};
@connect( mapStateToProps,mapDispatchToProps)
class SchemeTotalTable extends Component {
	constructor(props) {
		super(props);
		this.Totalcolumns = [
		{
			title: '方案名称',
			dataIndex: 'strategyName',
			key: 'strategyName',
			render: (text,record) =>{
				return(
					<span onClick={()=>this.onRowClick(record.assets)}>
						<a >{text}</a>
					</span>
				)
			} 
		}, {
			title: '创建日期',
			dataIndex: 'createTime',
			key: 'createTime',
		}, {
			title: '最新更新',
			dataIndex: 'updateTime',
			key: 'updateTime',
		},{
			title: '方案说明',
			dataIndex: 'strategyDescription',
			key: 'strategyDescription',
		},{
			title: '操作',
			dataIndex: 'operation',
			key: 'operation',
			render: (text, record) => {
				// console.log('text',text,'record',record)
				return (
					<Row>
						<a onClick={()=>this.toDetailData(record.id)}>
							<EditScheme
								LargeAssetData={this.props.LargeAssetData}
								title='修改'
							/>
						</a>
						<Popconfirm title="确定删除?" onConfirm={() => this.onDelete(record.id)}>
							<a>删除</a>
						</Popconfirm>
					</Row>
				);
			},
		},];
	};
	toDetailData=(v)=>{
		const {getOneConfigureScheme,changeState}=this.props;
		getOneConfigureScheme({
			'strategyId':v
		})
		changeState({
			'strategyId':v
		})
	};
	onDelete = (v) => {
		const {deleteScheme} = this.props;
		deleteScheme({
			'strategyId':v
		})
	};
	onRowClick = (v) => {
		const {changeState,CSchangeState} =this.props;
		changeState({
			'isShowModel':true
		})
		CSchangeState({
			'CSassets':v
		})
	};
	render() {
		const {data} = this.props;
		return (
			<div >
				<Table
					columns={this.Totalcolumns}
					dataSource={data}
					pagination={false}
					size='small'
					rowKey={record => record.id}
				/>
			</div>
		);
	}
}

//方案详情单元格 修改
@connect( mapStateToProps,mapDispatchToProps)
class SNEditableCell extends Component {
	state = {
		value: this.props.value,
		editable: false,
	}
	handleChange = (e) => {
		const {changeState} = this.props;
		const value = e.target.value;
		this.setState({ value });
		changeState({
			'strategyName':value
		})
	}
	// check = () => {
	// 	this.setState({ editable: false });
	// 	if (this.props.onChange) {
	// 		this.props.onChange(this.state.value);
	// 	}
	// 	// console.log('SNEditableCell>state>',this.state)
	// 	// changeState({
	// 	//   'strategyName':this.state.value
	// 	// })
	// }
	edit = () => {
		this.setState({ editable: true });
	}
	render() {
		const { value, editable } = this.state;
		return (
			<div className="editable-cell">
				{
					editable ?
						<div className="editable-cell-input-wrapper">
							<Input
								value={value}
								onChange={this.handleChange}
							/>
							<Icon
								type="check"
								className="editable-cell-icon-check"
								onClick={this.check}
							/>
						</div>
						:
						<div className="editable-cell-text-wrapper">
							{value || ' '}
							<Icon
								type="edit"
								className="editable-cell-icon"
								onClick={this.edit}
							/>
						</div>
				}
			</div>
		);
	}
}
@connect( mapStateToProps,mapDispatchToProps)
class SDEditableCell extends Component {
	state = {
		value: this.props.value,
		editable: false,
	}
	handleChange = (e) => {
		const {changeState} = this.props;
		const value = e.target.value;
		this.setState({ value });
		changeState({
			'strategyDescription':value
		})
	}
	// check = () => {
	// 	this.setState({ editable: false });
	// 	const {changeState} = this.props;
	// 	if (this.props.onChange) {
	// 		this.props.onChange(this.state.value);
	// 	}
	// 	// console.log('SDEditableCell>state>',this.state)
	// 	// changeState({
	// 	//   'strategyDescription':this.state.value
	// 	// })
	// }
	edit = () => {
		this.setState({ editable: true });
	}
	render() {
		const { value, editable } = this.state;
		return (
			<div className="editable-cell">
				{
					editable ?
						<div className="editable-cell-input-wrapper">
							<Input
								value={value}
								onChange={this.handleChange}
								
							/>
							<Icon
								type="check"
								className="editable-cell-icon-check"
							/>
						</div>
						:
						<div className="editable-cell-text-wrapper">
							{value || ' '}
							<Icon
								type="edit"
								className="editable-cell-icon"
								onClick={this.edit}
							/>
						</div>
				}
			</div>
		);
	}
}


//方案详情
@connect( mapStateToProps,mapDispatchToProps)
class SchemeDetailTable extends Component {
	constructor(props) {
		super(props);
		this.Detailcolumns = [
		{
			title: '方案名称',
			dataIndex: 'strategyName',
			key: 'strategyName',
			render: (text, record) => (
				<SNEditableCell
					value={text}
					onChange={this.onCellChange(record.key, 'strategyName')}
				/>
			),
		},{
			title: '方案描述',
			dataIndex: 'strategyDescription',
			key: 'strategyDescription',
			render: (text, record) => (
				<SDEditableCell
					value={text}
					onChange={this.onCellChange(record.key, 'strategyDescription')}
				/>
			),
		}, ];
		if(props.detailData){
			this.state = {
				dataSource: [{
					key: '0',
					strategyName:`${props.detailData.strategyName}`,
					strategyDescription: `${props.detailData.strategyDescription}`,
				},],
			};
		}else{
			this.state = {
				dataSource: [{
					key: '0',
					strategyName:'',
					strategyDescription: '',
				},],
			};
		}
		
	}

	onCellChange = (key, dataIndex) => {
		return (value) => {
			const dataSource = [...this.state.dataSource];
			const target = dataSource.find(item => item.key === key);
			if (target) {
				target[dataIndex] = value;
				this.setState({ dataSource });
			}
		};
	}

	render() {
		const { dataSource } = this.state;
		const Detailcolumns = this.Detailcolumns;
		return (
			<div >
				<h3>方案详情</h3>
				<Table
					columns={Detailcolumns}
					dataSource={dataSource}
					pagination={false}
					size='small'
				/>
			</div>
		);
	}
}

//资产指数（基金）单元格修改PDT
@connect( mapStateToProps,mapDispatchToProps)
class EditCellAssetIndexSelect extends Component {
	state = {
		value: this.props.value,
		editable: false,
	}
	handleChange = (e) => {
		const value = e;
		const {pdtList,changeState} =this.props;
		this.setState({ value });
		// pdtList.map((item)=>{
		//   if(item.productName == e){
		//     changeState({
		//       'AssetIndex':item.productId
		//     })
		//   }
		// })
		if (this.props.onChange) {
			this.props.onChange(value);
		}
	}
	// check = () => {
	// 	this.setState({ editable: false });
	// 	// if (this.props.onChange) {
	// 	//   this.props.onChange(this.state.value);
	// 	// }
	// }
	edit = () => {
		this.setState({ editable: true });
	}
	render() {
		const { value, editable } = this.state;
		const {pdtList} =this.props;
		return (
			<div className="editable-cell">
				{
					editable ?
						<div className="editable-cell-input-wrapper">
							<Select 
								defaultValue="" 
								style={{ width: 100 }} 
								onChange={this.handleChange} 
								onPressEnter={this.check}
								showSearch
							>
								{
									pdtList.map((item,i)=><Option value={item.productName} key={i}>{item.productName}</Option>)
								}
							</Select>

							<Icon
								type="check"
								className="editable-cell-icon-check"
							/>
						</div>
						:
						<div className="editable-cell-text-wrapper">
							{value || ' '}
							<Icon
								type="edit"
								className="editable-cell-icon"
								onClick={this.edit}
							/>
						</div>
				}
			</div>
		);
	}
}
//资产名称单元格修改
@connect( mapStateToProps,mapDispatchToProps)
class EditCellAssetNameSelect extends Component {
	state = {
		value: this.props.value,
		editable: false,
	}
	handleChange = (e) => {
		const value = e;
		this.setState({ value });
		const {LargeAssetData,changeState} =this.props;
		// LargeAssetData.map((item)=>{
		//   if(item.assetName == e){
		//     changeState({
		//       'AssetName':item.assetCode
		//     })
		//   }
		// })
		if (this.props.onChange) {
			this.props.onChange(value);
		}
	}
	// check = () => {
	// 	this.setState({ editable: false });
	// 	const {value} = this.state;
	// //   if (this.props.onChange) {
	// //     this.props.onChange(this.state.value);
	// //   }
	// }
	edit = () => {
		this.setState({ editable: true });
	}
	render() {
		const { value, editable } = this.state;
		const {LargeAssetData} =this.props;
		return (
			<div className="editable-cell">
				{
					editable ?
						<div className="editable-cell-input-wrapper">
							<Select showSearch defaultValue="" style={{ width: 100 }} onChange={this.handleChange} onPressEnter={this.check}>
								{
									LargeAssetData.map((item,i)=><Option value={item.assetName} key={i}>{item.assetName}</Option>)
								}
							</Select>
							<Icon
								type="check"
								className="editable-cell-icon-check"
							/>
						</div>
						:
						<div className="editable-cell-text-wrapper">
							{value || ' '}
							<Icon
								type="edit"
								className="editable-cell-icon"
								onClick={this.edit}
							/>
						</div>
				}
			</div>
		);
	}
}
//标的设置
@connect( mapStateToProps,mapDispatchToProps)
class TargetSetTable extends Component {
	constructor(props) {
		super(props);
		console.log('TargetSetTable>>>22',this.props)
		this.targetcolumns = [
		{
			title: '资产名称',
			dataIndex: 'AssetName',
			key: 'AssetName',
			render: (text, record) => (
				<EditCellAssetNameSelect
					LargeAssetData={props.LargeAssetData}
					value={text}
					onChange={this.onCellChange(record.key, 'AssetName')}
				/>
			),
		},
		{
			title: '资产指数（基金）',
			dataIndex: 'AssetIndex',
			key: 'AssetIndex',
			render: (text, record) => (
				<EditCellAssetIndexSelect
					pdtList={props.pdtList}
					value={text}
					onChange={this.onCellChange(record.key, 'AssetIndex')}
				/>
			),
		},{
			title: '操作',
			dataIndex: 'operation',
			key: 'operation',
			render: (text, record) => {
				return (
					this.state.dataSource.length > 0 ?
					(
						<Popconfirm title="确定删除?" onConfirm={() => this.onDelete(record.key)}>
							<a>删除</a>
						</Popconfirm>
					) : null
				);
			},
		}, ];
		if(props.detailData){
			const obj = {}
			const dS =[];
			if(props.detailData.assets){
				const dataLength = props.detailData.assets.length;
				const assets = props.detailData.assets;
				assets.map((item,i)=>{
					item.key = i
					item.AssetIndex = item.productName
					item.AssetName = item.assetName
				})
				console.log('TargetSetTable>assets',assets)
				this.state = {
					count:dataLength,
					dataSource: assets,
				};
			}
		}else{
			this.state = {
				count:1,
				dataSource: [{
					key: 0,
					AssetIndex:'',
					AssetName: '',
				},],
			};
		}
	}

	onCellChange = (key, dataIndex) => {
		return (value) => {
			const {changeState,LargeAssetData,pdtList} =this.props;
			const dataSource2 = this.state.dataSource;
			const dataSource = [...this.state.dataSource];
			const target = dataSource.find(item => item.key === key);
			if (target) {
				target[dataIndex] = value;
				this.setState({ dataSource });
			}
			dataSource2.map((item)=>{
				LargeAssetData.map((i)=>{
					if(item.AssetName == i.assetName){
						item.AssetName = i.assetCode
					}
				})
				pdtList.map((k)=>{
					if(item.AssetIndex == k.productName){
						item.AssetIndex = k.productId
					}
				})
			})
			changeState({
				'assets':dataSource2
			})
		};
	}

	handleAdd = () => {
		const { count, dataSource } = this.state;
		const newData = {
			key: count,
		};
		this.setState({
			dataSource: [...dataSource, newData],
			count: count + 1,
		});
	}

	onDelete = (key) => {
		const dataSource = [...this.state.dataSource];
		this.setState({ dataSource: dataSource.filter(item => item.key !== key) });
	}

	render() {
		const { dataSource } = this.state;
		const targetcolumns = this.targetcolumns;
		return (
			<div >
				<h3>标的设置</h3>
				<Table
					columns={targetcolumns}
					dataSource={dataSource}
					pagination={false}
					size='small'
					rowKey={record => record.key}
				/>
				<Button className="editable-add-btn" onClick={this.handleAdd}>新增</Button>
			</div>
		);
	}
}


export {
	SchemeTotalTable,
	SchemeDetailTable,
	TargetSetTable,
}